﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HowToUseAjaxAutoComplete.aspx.cs"
    Inherits="JquerySample.HowToUseAjaxAutoComplete" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to use Ajax auto complete in asp.net | jQuery Sample</title>
    <link href="Style/AutoComplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">

        $("#autoCompleteBox").live('keyup', function (event) {
            /// <summary>
            ///  call to web service and display suggestions.
            /// </summary>
            if ($(this).val().length == 0) {
                // Hide the suggestion box if text is empty.
                $('#suggestions').hide();
            } else {
                //get suggestions. 
                getWebsiteDetails("WebsiteList.asmx/WebsiteDetails",
                                    "{'websiteTitle':'" + $("#autoCompleteBox").val() + "'}",
                                    onRequestSuccess,
                                    onRequestFail);
            }
        });

        $('#autoCompleteBox').live('keydown', function (event) {
            /// <summary>
            ///  this is used to prevent the post back when hit enter button.
            /// </summary>
            if (event.keyCode == '13') {
                event.preventDefault();
            }
        });

        function getWebsiteDetails(url, data, successEvent, failerEvent) {
            $.ajax({
                /// <summary>
                ///  Perform an asynchronous HTTP (Ajax) request to get web site details
                /// </summary>
                type: "POST",
                url: url,
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successEvent,
                failure: failerEvent
            });
        }
        function onRequestSuccess(response) {
            /// <summary>
            /// Display server time when success
            /// </summary>
            $('#autoSuggestionsList').empty();
            var website = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

            if (website.length > 0) {
                for (var i = 0; i < website.length; i++) {
                    $('#autoSuggestionsList').append($('<li/>').data('Uri', website[i].NavigationLink).click(function () {
                        $("#websiteUrl").text($(this).data('Uri'));
                        $('#suggestions').hide();
                        $("#autoCompleteBox").val($(this).text());
                    }).html(website[i].Title));
                }
                $('#suggestions').show();
            }
        }
        function onRequestFail(msg) {
            /// <summary>
            /// show error message when there is an error
            /// </summary>
           alert(msg.d);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="autoCompleteBox" type="text" />
        <div class="suggestionsBox" id="suggestions" style="display: none;">
            <ul class="suggestionList" id="autoSuggestionsList">
            </ul>
        </div>
        <div id="websiteUrl">
        </div>
    </div>
    </form>
</body>
</html>
